<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Use correct character set. -->
		<meta charset="utf-8">
		<!-- Tell IE to use the latest, best version. -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>GIS</title>
		<script src="Build/Cesium/Cesium.js"></script>
		<script src="jQuery/jquery-3.1.1.js"></script>
		<style>
			@import url(Build/Cesium/Widgets/widgets.css);

			html,
			body,
			#cesiumContainer {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div style="position: absolute;z-index:1;right: 9%;top: 1%;">
			<button id="test-3" style="border:1px solid #333b46;width:80px;height:30px;border-radius: 14px;
			background: #333b46;color: white;">视角复位</button>
		</div>
		<div id="latlng_show" style="width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">
			<div style="width:100px;height:30px;float:left;">
				<font size="3" color="white">经度：<span id="longitude_show"></span></font>
			</div>
			<div style="width:100px;height:30px;float:left;">
				<font size="3" color="white">纬度：<span id="latitude_show"></span></font>
			</div>
			<div style="width:140px;height:30px;float:left;">
				<font size="3" color="white">视角高：<span id="altitude_show"></span>km</font>
			</div>
		</div>
		<!-- 控件容器 -->
		<div id="credit"></div>
		<!-- 地图容器 -->
		<div id="cesiumContainer"></div>
	</body>
</html>
	<script type="text/javascript">
			var viewer = new Cesium.Viewer('cesiumContainer', {
				geocoder: false, //搜索控件,搜索后镜头移动到搜索位置
				homeButton: false, //视角返回初始位置
				sceneModePicker: true, //地图模式控件(3d、2.5d、2d)
				baseLayerPicker: true, //地图图层选择
				navigationHelpButton: true, //操作帮助
				animation: true, //动画控件,控制视图动画播放速度
				creditContainer: "credit", //控件容器
				timeline: true, //时间线,指示当前时间,允许用户跳到特定的时间
				fullscreenButton: true, //全屏按钮
				//  vrButton:true,//vr按钮
			});
			viewer.imageryLayers.removeAll();
			var GoogleMap = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
				url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" //谷歌影像  	
			}));
			viewer.imageryLayers.add(GoogleMap);


			viewer._cesiumWidget._creditContainer.style.display = "none"; //	去除版权信息
			viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ //调用影响中文注记服务
				url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
				layer: "tdtAnnoLayer",
				style: "default",
				format: "image/jpeg",
				tileMatrixSetID: "GoogleMapsCompatible",
				show: false
			}));
			
			//顺便附带净空区的地图服务
// viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
//     url: 'http://testapp.airspace.cn/geoserver/airspace/wms?transparent=true&format=image/png',
//     layers: 'airspace:airport',
// }));
			
			viewer.scene.debugShowFramesPerSecond = true; //显示帧速(fps)
$("#test-3").click(function(){
	var point = Cesium.Cartesian3.fromDegrees(114.0743, 33.6198,350.0);//114.0752, 33.6233,600.0
	viewer.camera.setView({
	    destination : point,
	    orientation: {
	        heading : Cesium.Math.toRadians(0.0), ////围绕负z轴的旋转
	        pitch : Cesium.Math.toRadians(-40), //围绕负y轴的旋转
	        roll : 0.0 ///围绕正x轴的旋转
	    }
	});
})
			//自己给相机设置位置
			var point = Cesium.Cartesian3.fromDegrees(114.0743, 33.6198, 350.0);
			viewer.camera.setView({
				destination: point,
				orientation: {
					heading: Cesium.Math.toRadians(0.0), //默认值
					pitch: Cesium.Math.toRadians(-40.0), // 默认值
					roll: 0.0 //默认值
				}
			});

			//   添加标记有  点，广告牌和标签（Points, Billboards, and Labels）
			var citizensBankPark = viewer.entities.add({
				position: Cesium.Cartesian3.fromDegrees(114.07573, 33.62309, 0.0),
				name: '壹号码头',
				//广告牌
				billboard: {
					image: 'images/cluster1.png',
					width: 24,
					height: 24
				},
				label: {
					text: '一号码头',
					font: '14pt monospace',
					style: Cesium.LabelStyle.FILL_AND_OUTLINE,
					outlineWidth: 2,
					verticalOrigin: Cesium.VerticalOrigin.TOP, //文字垂直位置
					pixelOffset: new Cesium.Cartesian2(0, 22) ////文字中心位置
				}
			});
			//这个是镜头追踪，将镜头固定在标记上
			//viewer.zoomTo(citizensBankPark);
			//添加3d实体模型
			var entity1 = viewer.entities.add({
				position: Cesium.Cartesian3.fromDegrees(114.07373, 33.62359, 0.0),
				name: '货车001',
				model: {
					uri: 'Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
					minimumPixelSize: 30,
					//  maximumScale :30
				}
			});
			//添加3d实体模型
			var entity2 = viewer.entities.add({
				position: Cesium.Cartesian3.fromDegrees(114.07423, 33.62359, 0.0),
				name: '货车002',
				model: {
					uri: 'Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
					minimumPixelSize: 30,
					//   maximumScale :30
				}
			});
			//这个是镜头追踪，将镜头固定在小车上
			//viewer.trackedEntity = entity;

			var test = "我是后台数据"
			//货车介绍定位追踪
			entity1.description =
				'\
<img\
  width="50%"\
  style="float:left; margin: 0 1em 1em 0;"\
  src="//imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg"/>\
<p>\
  一大块果冻，想不想吃？\
</p>\
<p>\
 ' +
				test +
				' \
</p>\
<p>\
  介绍: \
  <a style="color: WHITE"\
    target="_blank"\
    href="http://imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg">点击查看</a>\
</p>';


			<!-- 经纬度实时显示 -->
			var longitude_show = document.getElementById('longitude_show');
			var latitude_show = document.getElementById('latitude_show');
			var altitude_show = document.getElementById('altitude_show');
			var canvas = viewer.scene.canvas;
			//具体事件的实现
			var ellipsoid = viewer.scene.globe.ellipsoid;
			var handler = new Cesium.ScreenSpaceEventHandler(canvas);
			handler.setInputAction(function(movement) {
				//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
				var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
				if (cartesian) {
					//将笛卡尔三维坐标转为地图坐标（弧度）
					var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
					//将地图坐标（弧度）转为十进制的度数
					var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
					var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
					var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
					longitude_show.innerHTML = log_String; //经度
					latitude_show.innerHTML = lat_String; //纬度
					altitude_show.innerHTML = alti_String; //视角高度
				}
			}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
     
		 hc();//货船
		 kc();//客船
		 
	//	**************	GIS移动轨迹   货船   *************************
	function hc(){
		let data = [];
					data[0] = [{
						longitude: 114.0763,
						dimension: 33.6238,
						height: 0,
						time: 0
					}, {
						longitude: 114.0762,
						dimension: 33.6235,
						height: 0,
						time: 40
					}, {
						longitude: 114.0760,
						dimension: 33.6232,
						height: 0,
						time: 100
					}, {
						longitude: 114.0760,
						dimension: 33.6232,
						height: 0,
						time: 280
					}, {
						longitude: 114.0760,
						dimension: 33.6232,
						height: 0,
						time: 360
					}];
		
					data[1] = [{
						longitude: 114.0769,
						dimension: 39.918034,
						height: 0,
						time: 0
					}, {
						longitude: 114.0763,
						dimension: 33.6235,
						height: 0,
						time: 40
					}, {
						longitude: 114.0761,
						dimension: 33.6232,
						height: 0,
						time: 100
					}, {
						longitude: 114.0759,
						dimension: 33.6227,
						height: 0,
						time: 280
					}, {
						longitude: 114.0758,
						dimension: 33.6228,
						height: 0,
						time: 360
					}];
		
					data[2] = [{
						longitude: 114.0772,
						dimension: 39.918034,
						height: 0,
						time: 0
					}, {
						longitude: 114.0764,
						dimension: 33.6235,
						height: 0,
						time: 40
					}, {
						longitude: 114.0762,
						dimension: 33.6232,
						height: 0,
						time: 100
					}, {
						longitude: 114.0760,
						dimension: 33.6227,
						height: 0,
						time: 280
					}, {
						longitude: 114.0756,
						dimension: 33.6223,
						height: 0,
						time: 360
					}];
					// 起始时间
					let start = Cesium.JulianDate.fromDate(new Date(2017, 7, 11));
					// 结束时间
					let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
					// 设置始时钟始时间
					viewer.clock.startTime = start.clone();
					// 设置时钟当前时间
					viewer.clock.currentTime = start.clone();
					// 设置始终停止时间
					viewer.clock.stopTime = stop.clone();
					// 时间速率，数字越大时间过的越快
					viewer.clock.multiplier = 10;
					// 时间轴
					viewer.timeline.zoomTo(start, stop);
					// 循环执行    CLAMPED：达到终止时间后停止LOOP_STOP：达到终止时间后重新循环UNBOUNDED：达到终止时间后继续读秒
						viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
		
					for (let j = 0; j < data.length; j++) {
						let property = computeFlight(data[j]);
		
						// 添加模型
						let planeModel = viewer.entities.add({
							// 和时间轴关联
							availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
								start: start,
								stop: stop
							})]),
							position: property,
							// 根据所提供的速度计算点
							orientation: new Cesium.VelocityOrientationProperty(property),
							// 模型数据
							model: {
								uri: 'Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
								minimumPixelSize: 30
							}
						});
						if (j == 0) {
							planeModel.name = "货船1111";
							var test = "我是后台数据11111"
							//定位追踪
							planeModel.description = "<p>预计到港时间：<br>2019/1/25/15：50</p>";
						}
						if (j == 1) {
							planeModel.name = "货船2221";
							var test = "我是后台数据22222"
							//定位追踪
							planeModel.description = "<p>预计到港时间：<br>2019/2/25/15：20</p>";
						}
						if (j == 2) {
							planeModel.name = "货船3333";
							var test = "我是后台数据3333"
							//定位追踪
							planeModel.description = "<p>预计到港时间：<br>2019/11/25/15：10</p>";
						}
		
					}
					/**
					 * 计算位置
					 * @param source 数据坐标
					 * @returns {SampledPositionProperty|*}
					 */
					function computeFlight(source) {
						// 取样位置 相当于一个集合
						let property = new Cesium.SampledPositionProperty();
						for (let i = 0; i < source.length; i++) {
							let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
							let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
							// 添加位置，和时间对应
							property.addSample(time, position);
						}
						return property;
					}
		
	}
			// *****************     客船        **************************
			function kc(){
				let ke_data = [];
							ke_data[0] = [{
								longitude: 114.0753,
								dimension: 33.6207,
								height: 0,
								time: 0
							}, {
								longitude: 114.0753,
								dimension: 33.6212,
								height: 0,
								time: 40
							}, {
								longitude: 114.0754,
								dimension: 33.6215,
								height: 0,
								time: 100
							}, {
								longitude: 114.0755,
								dimension: 33.6217,
								height: 0,
								time: 280
							}, {
								longitude: 114.0755,
								dimension: 33.6220,
								height: 0,
								time: 360
							}];
				ke_data[1] = [{
								longitude: 114.0755,
								dimension: 33.6207,
								height: 0,
								time: 0
							}, {
								longitude: 114.0756,
								dimension: 33.6210,
								height: 0,
								time: 40
							}, {
								longitude: 114.0757,
								dimension: 33.6214,
								height: 0,
								time: 100
							}, {
								longitude: 114.0756,
								dimension: 33.6218,
								height: 0,
								time: 280
							}, {
								longitude: 114.0753,
								dimension: 33.6219,
								height: 0,
								time: 360
							}];
				ke_data[2] = [{
								longitude: 114.0759,
								dimension: 33.6212,
								height: 0,
								time: 0
							}, {
								longitude: 114.0760,
								dimension: 33.6214,
								height: 0,
								time: 40
							}, {
								longitude: 114.0760,
								dimension: 33.6221,
								height: 0,
								time: 100
							}, {
								longitude: 114.0761,
								dimension: 33.6228,
								height: 0,
								time: 280
							}, {
								longitude: 114.0760,
								dimension: 33.6234,
								height: 0,
								time: 360
							}];
									// 起始时间
									let start = Cesium.JulianDate.fromDate(new Date(2017, 7, 11));
									// 结束时间
									let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
									// 设置始时钟始时间
									viewer.clock.startTime = start.clone();
									// 设置时钟当前时间
									viewer.clock.currentTime = start.clone();
									// 设置始终停止时间
									viewer.clock.stopTime = stop.clone();
									// 时间速率，数字越大时间过的越快
									viewer.clock.multiplier = 10;
									// 时间轴
									viewer.timeline.zoomTo(start, stop);
									// 循环执行    CLAMPED：达到终止时间后停止LOOP_STOP：达到终止时间后重新循环UNBOUNDED：达到终止时间后继续读秒
										viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
						
									for (let j = 0; j < ke_data.length; j++) {
										let property = computeFlight(ke_data[j]);
										// 添加模型
										let planeModel = viewer.entities.add({
											// 和时间轴关联
											availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
												start: start,
												stop: stop
											})]),
											position: property,
											// 根据所提供的速度计算点
											orientation: new Cesium.VelocityOrientationProperty(property),
											// 模型数据
											model: {
												uri: 'Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
												minimumPixelSize: 20
											}
										});
										if (j == 0) {			
// 												for(let i = 0;i<ke_data[0].length;i++){
// 													console.log(ke_data[0][i].longitude);
// 													console.log(ke_data[0][i].dimension);
// 													planeModel.orientation = Cesium.Transforms.headingPitchRollQuaternion(
// 													        Cesium.Cartesian3.fromDegrees(ke_data[0][i].longitude, ke_data[0][i].dimension, 0.0),
// 													        new Cesium.HeadingPitchRoll(
// 													            Cesium.Math.toRadians(110),
// 													            Cesium.Math.toRadians(0),
// 													            Cesium.Math.toRadians(0)
// 													        )
// 													    )
															planeModel.name = "客船1111";
															var test = "我是后台数据11111";
															//定位追踪
															planeModel.description = "<p>预计到港时间：<br>2019/1/25/15：50</p>";
										//		}

											
										}
										if (j == 1) {
											planeModel.name = "客船2221";
											var test = "我是后台数据22222"
											//定位追踪
											planeModel.description = "<p>预计到港时间：<br>2019/2/25/15：20</p>";
										}
										if (j == 2) {
											planeModel.name = "客船3333";
											var test = "我是后台数据3333"
											//定位追踪
											planeModel.description = "<p>预计到港时间：<br>2019/11/25/15：10</p>";
										}
						
									}
									/**
									* 计算位置
									* @param source 数据坐标
									* @returns {SampledPositionProperty|*}
									*/
									function computeFlight(source) {
										// 取样位置 相当于一个集合
										let property = new Cesium.SampledPositionProperty();
										for (let i = 0; i < source.length; i++) {
											let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
											let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
											// 添加位置，和时间对应
											property.addSample(time, position);
										}
										return property;
									}	

			}
				
		</script>
